<!DOCTYPE html>
<html>
<head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .box{
            width: 60px;
            height: 60px;
            margin: 100px auto;
            background: url(./imgs/index.png) no-repeat;
            background-position: -182px 0;
        }

        .nameBox{
            overflow: hidden;
            height: 200px;
            width: 435px;
            margin: 50px auto;
        }
        .nameBox li{
            float: left;
            margin-right: 5px;
        }
        .d {
            width: 120px;
            height: 165px;
            background: url(./imgs/characters.jpg) no-repeat;
            background-position: -434px 0;
        }
        .n {
            width: 135px;
            height: 165px;
            background: url(./imgs/characters.jpg) no-repeat;
            background-position: -300px -357px;
        }
        .m {
            width: 155px;
            height: 165px;
            background: url(./imgs/characters.jpg) no-repeat;
            background-position: -131px -355px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="nameBox">
        <ul>
            <li class="d"></li>
            <li class="n"></li>
            <li class="m"></li>
        </ul>
    </div>
</body>
</html>